import React,{Component} from 'react'
import Page1 from './views/Page1';
import Page2 from './views/Page2';
import Page3 from './views/Page3';
import Page4 from './views/Page4';
import Page5 from './views/Page5';
export  default class  App extends Component{
    constructor(){
        super();
        this.state = {//状态(数据)
            num:10,
            n:1,
            com:Page1
        }
    }

    addNum = ()=>{
        // // alert("函数被调用了");
        // this.state.num++;
        // console.log(this.state.num);
        // this.forceUpdate();
        // this.setState({
        //     num:100
        // })
        this.setState({
            num:this.state.num+1,
        },()=>{
            console.log(this.state.num);
        })
        this.setState({
            n:this.state.n+2
        })       
    }

    render(){//渲染 
        console.log("页面渲染");
        
        let  Com  = this.state.com;
        let Com1  = <this.state.com/>;
        return  <div>第一个class 组件
            <div>数据为{this.state.num}</div>
            <div>第二个数据{this.state.n}</div>
            <button onClick={()=>{
               //点击以后修改数据
               this.addNum();
            }}>+1</button>
            <hr/>

            <Page1></Page1>
            <Page2></Page2>
            <this.state.com></this.state.com>

            <Com></Com>
            {Com1}
            <hr/>
            <Page3></Page3>
            <hr/>
            <Page4></Page4>
            <hr/>
            <Page5></Page5>
        </div>
    }
}


